<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>小艾爱跑 | 大屏幕</title>
<link rel="stylesheet" href="http://static-paobuqu-com.oss-cn-hangzhou.aliyuncs.com/css%2Fbootstrap.min.css">
<script type="text/javascript" src="http://static-paobuqu-com.oss-cn-hangzhou.aliyuncs.com/js%2Fjquery-2.1.1.js"></script>
<link rel="shortcut icon" type="image/ico" href="web/favicon.ico">

<style type="text/css">
    
    body {font-family: Microsoft YaHei, Verdana, Arial, Helvetica, sans-serif;font-size: 14px;font-weight: bold;color: #1d1007; line-height:24px}
	
	html, body {
		height: 100%;
		text-align: center;
	}
	
	.head {
		width: 80%;
		margin: 30px;
		margin-top: 50px;
	}

	.foot {
		width: 80%;
		margin: 30px;
	}

	.border {
		border: 1px solid #FC808C;
		height: 90%;
		background-color: #ffffff;
		padding: 10px;
	}

	.left-top, .right-top {
		height: 56%;
	}
	
	.left-bottom, .right-bottom {
		height: 44%;
	}

	.content {
		height: 60%;
		padding: 30px 30px 25px 30px;
		background-color: #F4F4F4;
	}

	.content-row {
		height: 100%;
	}
	
	h2 {
		text-align: left;
		margin-left: 20px;
		margin-top: 10px;
	}

	.achievement {
		font-size: 22px;
	}

	.achievement div {
		margin-top: 7px;
	}

</style>

</head>
<body>

		<img class="head" src="http://static-paobuqu-com.oss-cn-hangzhou.aliyuncs.com/timing%2Fimage%2Fshjd%2Fhead.png">
		<div class="content">

				<div class="row content-row">
					<div class="col-xs-6 left-top">
						<div class="border">
							<h2 class="">接力赛 高校组</h2>
							<div class="row achievement ">
								<div class="col-xs-5">队伍名称</div>
								<div class="col-xs-2">圈数</div>
								<div class="col-xs-3">时间</div>
								<div class="col-xs-2">名次</div>
								
								<div class="relayUniversity">
									<div class="col-xs-5"></div>
									<div class="col-xs-2"></div>
									<div class="col-xs-3"></div>
									<div class="col-xs-2"></div>

									<div class="col-xs-5"></div>
									<div class="col-xs-2"></div>
									<div class="col-xs-3"></div>
									<div class="col-xs-2"></div>

									<div class="col-xs-5"></div>
									<div class="col-xs-2"></div>
									<div class="col-xs-3"></div>
									<div class="col-xs-2"></div>

									<div class="col-xs-5"></div>
									<div class="col-xs-2"></div>
									<div class="col-xs-3"></div>
									<div class="col-xs-2"></div>

									<div class="col-xs-5"></div>
									<div class="col-xs-2"></div>
									<div class="col-xs-3"></div>
									<div class="col-xs-2"></div>
								</div>

							</div>
						</div>
					</div>
					<div class="col-xs-6 right-top">
						<div class="border">
							<h2 class="">接力赛 社会组</h2>
							<div class="row achievement ">
								<div class="col-xs-5">队伍名称</div>
								<div class="col-xs-2">圈数</div>
								<div class="col-xs-3">时间</div>
								<div class="col-xs-2">名次</div>

								<div class="relaySociology">
									<div class="col-xs-5"></div>
									<div class="col-xs-2"></div>
									<div class="col-xs-3"></div>
									<div class="col-xs-2"></div>

									<div class="col-xs-5"></div>
									<div class="col-xs-2"></div>
									<div class="col-xs-3"></div>
									<div class="col-xs-2"></div>

									<div class="col-xs-5"></div>
									<div class="col-xs-2"></div>
									<div class="col-xs-3"></div>
									<div class="col-xs-2"></div>

									<div class="col-xs-5"></div>
									<div class="col-xs-2"></div>
									<div class="col-xs-3"></div>
									<div class="col-xs-2"></div>

									<div class="col-xs-5"></div>
									<div class="col-xs-2"></div>
									<div class="col-xs-3"></div>
									<div class="col-xs-2"></div>
								</div>

							</div>
						</div>
					</div>
					<div class="col-xs-6 left-bottom">
						<div class="border">
							<h2 class="">个人赛 男子组</h2>
							<div class="row achievement ">
								<div class="col-xs-3">选手号</div>
								<div class="col-xs-4">姓名</div>
								<div class="col-xs-3">成绩</div>
								<div class="col-xs-2">排名</div>

								<div class="personalMale">
									<div class="col-xs-3"></div>
									<div class="col-xs-4"></div>
									<div class="col-xs-3"></div>
									<div class="col-xs-2"></div>

									<div class="col-xs-3"></div>
									<div class="col-xs-4"></div>
									<div class="col-xs-3"></div>
									<div class="col-xs-2"></div>

									<div class="col-xs-3"></div>
									<div class="col-xs-4"></div>
									<div class="col-xs-3"></div>
									<div class="col-xs-2"></div>
								</div>

							</div>
						</div>
					</div>
					<div class="col-xs-6 right-bottom">
						<div class="border">
							<h2 class="">个人赛 女子组</h2>
							<div class="row achievement ">
								<div class="col-xs-3">选手号</div>
								<div class="col-xs-4">姓名</div>
								<div class="col-xs-3">成绩</div>
								<div class="col-xs-2">排名</div>

								<div class="personalFemale">
									<div class="col-xs-3"></div>
									<div class="col-xs-4"></div>
									<div class="col-xs-3"></div>
									<div class="col-xs-2"></div>

									<div class="col-xs-3"></div>
									<div class="col-xs-4"></div>
									<div class="col-xs-3"></div>
									<div class="col-xs-2"></div>

									<div class="col-xs-3"></div>
									<div class="col-xs-4"></div>
									<div class="col-xs-3"></div>
									<div class="col-xs-2"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
		</div>
		<img class="foot" src="http://static-paobuqu-com.oss-cn-hangzhou.aliyuncs.com/timing%2Fimage%2Fshjd%2Ffoot.png">

</body>
</html>
<script type="text/javascript">


    // 初始数据准备(dashboard/public/shjd2016)
    console.log(window.location.host + '/dashboard/public/shjd2016');
    $.ajax({
        dataType:'json',
        type: 'GET',
        url: 'http://' + window.location.host + '/dashboard/public/shjd2016',
        success: function(data) {

			setData(data);
			console.log(data);
        },
        error: function(error) {
           alert("请求失败");
        }
    });


    //定时刷新
    var handler = function(){
	    $.ajax({
	        dataType:'json',
	        type: 'GET',
	        url: 'http://' + window.location.host + '/dashboard/public/shjd2016',
	        success: function(data) {

				setData(data);
				console.log(data);
	        },
	        error: function(error) {
	           alert("请求失败");
	        }
	    });
    }
    var timer = setInterval( handler , 30000);

    function setData(data) {

    	console.log(data);

    	//容错机制
    	// if (data.personalFemale.length < 1 || data.personalMale.length < 1 || data.relayHighschool.length < 1 || data.relaySocial.length < 1) {
    	// 	return;
    	// }

    	// alert($('.personalFemale div').length);

    	//接力赛高校组成绩（前五）
    	if (data.relayHighschool.length != 0) {
			for (var i = 0; i < 5; i++) {
			    $('.relayUniversity div')[4 * i + 0].innerText = '';
			    $('.relayUniversity div')[4 * i + 1].innerText = '';
			    $('.relayUniversity div')[4 * i + 2].innerText = '';
			    $('.relayUniversity div')[4 * i + 3].innerText = '';
			};
			for (var i = 0; i < data.relayHighschool.length; i++) {
			    $('.relayUniversity div')[4 * i + 0].innerText = data.relayHighschool[i].team_name.substring(0, 7);
			    $('.relayUniversity div')[4 * i + 1].innerText = data.relayHighschool[i].nums;
			    $('.relayUniversity div')[4 * i + 2].innerText = data.relayHighschool[i].score;
			    $('.relayUniversity div')[4 * i + 3].innerText = data.relayHighschool[i].rank;
			};
    	}

    	//接力赛社会组成绩（前五）
    	if (data.relaySocial.length != 0) {
			for (var i = 0; i < 5; i++) {
			    $('.relaySociology div')[4 * i + 0].innerText = '';
			    $('.relaySociology div')[4 * i + 1].innerText = '';
			    $('.relaySociology div')[4 * i + 2].innerText = '';
			    $('.relaySociology div')[4 * i + 3].innerText = '';
			};
			for (var i = 0; i < data.relaySocial.length; i++) {
			    $('.relaySociology div')[4 * i + 0].innerText = data.relaySocial[i].team_name.substring(0, 7);
			    $('.relaySociology div')[4 * i + 1].innerText = data.relaySocial[i].nums;
			    $('.relaySociology div')[4 * i + 2].innerText = data.relaySocial[i].score;
			    $('.relaySociology div')[4 * i + 3].innerText = data.relaySocial[i].rank;
			};
    	}

    	//个人赛男子成绩（前三）
    	if (data.personalMale.length != 0) {
			for (var i = 0; i < 3; i++) {
			    $('.personalMale div')[4 * i + 0].innerText = '';
			    $('.personalMale div')[4 * i + 1].innerText = '';
			    $('.personalMale div')[4 * i + 2].innerText = '';
			    $('.personalMale div')[4 * i + 3].innerText = '';
			};
			for (var i = 0; i < data.personalMale.length; i++) {
			    $('.personalMale div')[4 * i + 0].innerText = data.personalMale[i].bib;
			    $('.personalMale div')[4 * i + 1].innerText = data.personalMale[i].runner_name.substring(0, 7);
			    $('.personalMale div')[4 * i + 2].innerText = data.personalMale[i].score;
			    $('.personalMale div')[4 * i + 3].innerText = data.personalMale[i].rank;
			};
    	}

    	//个人赛女子成绩（前三）
    	if (data.personalFemale.length != 0) {
			for (var i = 0; i < 3; i++) {
			    $('.personalFemale div')[4 * i + 0].innerText = '';
			    $('.personalFemale div')[4 * i + 1].innerText = '';
			    $('.personalFemale div')[4 * i + 2].innerText = '';
			    $('.personalFemale div')[4 * i + 3].innerText = '';
			};
			for (var i = 0; i < data.personalFemale.length; i++) {
			    $('.personalFemale div')[4 * i + 0].innerText = data.personalFemale[i].bib;
			    $('.personalFemale div')[4 * i + 1].innerText = data.personalFemale[i].runner_name.substring(0, 7);
			    $('.personalFemale div')[4 * i + 2].innerText = data.personalFemale[i].score;
			    $('.personalFemale div')[4 * i + 3].innerText = data.personalFemale[i].rank;
			};
    	}
    }
    
</script> 